<template>
  <el-dialog
    :model-value="visible"
    title="产品详情"
    width="1200px"
    :close-on-click-modal="false"
    @close="cls"
  >
    <div class="box">产品详细</div>
    <div class="product-info">
      <img :src="data.picurl" class="product-image" />
      <div class="product-details">
        <h2>{{ name }}</h2>
        <br />
        <p style="font-size: 20px">价格$:{{ data.price }}</p>
        <br />
        <p style="font-size: 20px">
          产品编码: {{ data.code == null ? "暂无" : data.code }}
        </p>
        <br />
        <p style="font-size: 20px">
          产品型号: {{ data.spec == null ? "暂无" : data.spec }}
        </p>
        <br />
        <p style="font-size: 20px">
          产品图号:
          {{ data.productNumber == null ? "暂无" : data.productNumber }}
          <el-button
            type="primary"
            style="margin-left: 300px"
            size="large"
            @click="inquire"
            >产品询价</el-button
          >
        </p>
      </div>
    </div>
    <br /><br />
    <div class="brand-info">
      <h2>品牌资料</h2>
      <p>{{ data.brandDetail }}</p>
    </div>
    <br /><br />
    <div class="additional-info">
      <h2>产品详情</h2>
      <p>
        {{ data.detail }}
      </p>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 定义响应式数据
const data = ref({
  picurl: "",
  price: "",
  name: "",
  id: "",
  code: "",
  spec: "",
  productNumber: "",
  detail: "",
  brandDetail: ""
});

const name = ref();

// 初始化方法
function init(item) {
  data.value = item;
  name.value = data.value.name;
}

// 定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

// 声明事件
const emits = defineEmits(["close", "choose"]);

// 关闭方法
function cls() {
  // 通知父组件关闭
  emits("close");
}

// 询价方法
function inquire() {
  //带参跳转到询价单
  router.push({
    name: "addenquriy",
    query: { id: data.value.id }
  });
  emits("choose", data.value);
}

// 暴露初始化方法
defineExpose({ init });
</script>

<style scoped>
.box {
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
  background-color: #efefef;
}

.product-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.product-image {
  width: 300px;
  height: 250px;
  margin-right: 30px;
}

.product-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.product-details h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.brand-info,
.additional-info {
  margin-bottom: 20px;
}

.additional-info h2,
.brand-info h2,
.product-details h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

.el-link {
  display: block;
  margin-top: 10px;
}
</style>
